<template>
  <div>
    <el-form :model="bpmnFormData" label-width="80px" :rules="rules" size="small">
      <el-form-item :label="bpmnFormData.$type === 'bpmn:Process'? '流程标识': '节点ID'" prop="id" @change="updateElementTask('id')">
        <el-input v-model="bpmnFormData.id"/>
      </el-form-item>
      <el-form-item :label="bpmnFormData.$type === 'bpmn:Process'? '流程名称': '节点名称'" prop="name">
        <el-input v-model="bpmnFormData.name" @change="updateElementTask('name')"/>
      </el-form-item>

      <!--流程的基础属性-->
      <template v-if="bpmnFormData.$type === 'bpmn:Process'">
        <el-form-item label="流程分类" prop="processCategory">
          <el-select v-model="bpmnFormData.processCategory" placeholder="请选择流程分类" @change="updateElementTask('processCategory')">
            <el-option
                v-for="dict in sys_process_category"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
            />
          </el-select>
        </el-form-item>
      </template>
      <el-form-item v-if="bpmnFormData.$type === 'bpmn:SubProcess'" label="状态">
        <el-switch v-model="bpmnFormData.isExpanded" active-text="展开" inactive-text="折叠" @change="updateElementTask('isExpanded')" />
      </el-form-item>
      <el-form-item label="节点描述">
        <el-input
          :rows="2"
          type="textarea"
          v-model="bpmnFormData.documentationValue"
          @change="updateDocumentation"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, watch, inject, getCurrentInstance } from 'vue';
import { StrUtil } from '@/utils/StrUtil';

// 属性定义
const props = defineProps({
  id: {
    type: String,
    required: true
  }
});

// 事件定义
const emit = defineEmits(['save']);

const { proxy } = getCurrentInstance();
const modelerStore = proxy.modelerStore;

const {sys_process_category} = proxy.useDict('sys_process_category')

const dicts = ref(['sys_process_category']);


// 表单校验规则
const rules = reactive({
  id: [
    { required: true, message: '节点Id 不能为空', trigger: 'blur' },
  ],
  name: [
    { required: true, message: '节点名称不能为空', trigger: 'blur' },
  ],
});

// 数据定义
const bpmnFormData = reactive({});

// 重置任务表单
const resetTaskForm = () => {
  // 复制业务对象到表单数据
  Object.assign(bpmnFormData, modelerStore.element.businessObject);
  
  // 设置文档值
  bpmnFormData.documentationValue = modelerStore.element.businessObject.documentation?.[0]?.text || '';
};

// 更新元素任务属性
const updateElementTask = (key) => {
  const taskAttr = Object.create(null);
  taskAttr[key] = bpmnFormData[key] || null;
  modelerStore.modeling.updateProperties(modelerStore.element, taskAttr);
};

// 更新文档
const updateDocumentation = () => {
  // 获取模型相关API
  const modeler = modelerStore.modeler;
  const moddle = modeler.get('moddle');
  const modeling = modeler.get('modeling');

  // 创建新的文档对象
  const documentation = moddle.create('bpmn:Documentation', {
    text: bpmnFormData.documentationValue
  });

  // 获取当前元素的扩展元素
  let extensionElements = modelerStore.element.businessObject.extensionElements;

  if (!extensionElements) {
    // 如果没有扩展元素，创建一个新的
    extensionElements = moddle.create('bpmn:ExtensionElements', {
      values: []
    });
  }

  // 更新文档
  modeling.updateProperties(modelerStore.element, {
    documentation: [documentation],
    extensionElements: extensionElements
  });

  // 强制更新模型
  modelerStore.modeler.get('commandStack').execute('element.updateProperties', {
    element: modelerStore.element,
    properties: {
      documentation: [documentation]
    }
  });

  // 触发保存事件
  emit('save');
};

// 监听ID变化重置表单
watch(() => props.id, (newVal) => {
  if (StrUtil.isNotBlank(newVal)) {
    resetTaskForm();
  }
}, { immediate: true });
</script>
